<template>
	<view class="detail-container">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in detailStore.swiperImgData" :key="index">
				<image :src="item.src" />
			</swiper-item>
		</swiper>

		<!-- 商品信息 -->
		<view class="good-info">
			<view class="title">{{detailStore.goodInfo.title}}</view>
			<view class="price">
				<view class="newPrice">￥{{detailStore.goodInfo.sell_price}}</view>
				<view class="oldPrice">{{detailStore.goodInfo.market_price}}</view>
			</view>
			<view class="content">
				<!-- {{detailStore.goodInfo}}
				{{detailStore.formatContent}} -->
				<rich-text :nodes="detailStore.formatContent" class="rich-text"></rich-text>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="jump-box">
				<view class="good-info">
					<image :src="detailStore.swiperImgData[0]?.src" />
					<view class="info-right">
						<view class="price">￥{{detailStore.goodInfo.sell_price}}</view>
						<view class="count">剩余 {{detailStore.goodInfo.stock_quantity}} 件</view>
						<view class="choice">请选择</view>
					</view>
				</view>
				<view class="number-box">
					<view class="buycount">购买数量</view>
					<uni-number-box :min="1" v-model="count"></uni-number-box>
				</view>
				<view class="cutline"></view>
				<view class="other-info">
					<view>商品货号：{{detailStore.goodInfo.goods_no}}</view>
					<view>库存情况：{{detailStore.goodInfo.stock_quantity}}件</view>
					<view>上架时间：{{detailStore.goodInfo.add_time.split('T')[0]}}</view>
				</view>
				<view class="button">
					<view class="add-button" v-if="statu > 1" @click="addCart">加入购物车</view>
					<view class="buy-button" v-if="statu < 1" @click="buy">立即购买</view>
				</view>
			</view>
		</uni-popup>

		<!-- 结算 -->
		<view class="final">
			<view class="cart" @click="goCart">
				<uni-badge class="uni-badge-left-margin" :text="cartStore.cartData.length" absolute="rightTop"
					size="small" v-if="cartStore.cartData.length > 0">
					<image src="/static/images/shoppingcart.png" />
				</uni-badge>
				<image v-else src="/static/images/shoppingcart.png" />
				<view class="cart-text">购物车</view>
			</view>
			<view class="add" @click="open(2)">加入购物车</view>
			<view class="buy" @click="open(0)">立即购买</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		addHistory
	} from '/api/detail.api.js'
	import {
		useDetailStore,
		useCartStore,
		useLoginStore
	} from '../../stores/store.js'

	const detailStore = useDetailStore()
	const cartStore = useCartStore()
	const loginStore = useLoginStore()

	const popup = ref() // 弹框
	const statu = ref() // 弹框状态
	const count = ref(1) // 数量
	
	onLoad((options) => {
		detailStore.getSwiperImgData(options.goods_id)
		detailStore.getGoodInfoData(options.goods_id)
		if (loginStore.Token) {
			addHistory(options.goods_id)
		}
	})

	// 打开弹框
	const open = (num) => {
		popup.value.open()
		statu.value = num
	}

	// 加入购物车
	const addCart = () => {
		if (!loginStore.Token) {
			loginStore.goLogin('detail')
			uni.showToast({
				title: '请先登录',
				icon: 'error'
			})
			return
		}
		let data = {
			id: detailStore.goodInfo.id,
			count: count.value,
			selected: true,
			price: detailStore.goodInfo.sell_price
		}
		cartStore.addCartData(data)
		popup.value.close()
	}

	// 跳转购物车
	const goCart = () => {
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}

	// 立即购买
	const buy = () => {
		if (!loginStore.Token) {
			uni.showToast({
				title: '请先登录',
				icon: 'error'
			})
			loginStore.goLogin()
			return
		}
		addCart()
		goCart()
	}
</script>

<style lang="scss" scoped>
	page {}

	.detail-container {
		background-color: #f0eded;

		// 轮播图
		swiper {
			border-radius: px2rpx(5);
			width: px2rpx(365);
			height: px2rpx(240);
			margin: px2rpx(5);
			background-color: #fff;

			swiper-item {
				width: px2rpx(365);
				height: px2rpx(240);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: px2rpx(250);
					height: px2rpx(230);
				}

			}
		}

		// 商品信息
		.good-info {
			background-color: #fff;
			margin: px2rpx(5);
			width: px2rpx(365);
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: px2rpx(16);
				margin: px2rpx(5);
			}

			.price {
				display: flex;
				align-items: center;

				.newPrice {
					font-size: px2rpx(20);
					color: #fa865d;
					margin-right: px2rpx(5);
				}

				.oldPrice {
					font-size: px2rpx(14);
				}
			}

			.content {
			  width: px2rpx(365);
			  /* 强制所有图片最大宽度 */
			  .rich-text img {
			    width: 100% !important;
			  }
			}
		}

		// 结算
		.final {
			position: fixed;
			bottom: px2rpx(0);
			width: px2rpx(375);
			height: px2rpx(50);
			background-color: #fff;
			display: flex;

			.cart {
				margin-top: px2rpx(5);
				display: flex;
				flex-direction: column;
				align-items: center;
				width: px2rpx(50);
				height: px2rpx(50);

				image {
					width: px2rpx(20);
					height: px2rpx(20);
				}

				.cart-text {
					font-size: px2rpx(10);
					color: #646566;
				}
			}

			.add {
				width: px2rpx(160);
				height: px2rpx(40);
				color: #fff;
				background-image: linear-gradient(to right, #ffce1e, #ff8a17);
				border-radius: px2rpx(20) 0 0 px2rpx(20);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: px2rpx(5);
				font-size: px2rpx(14);

			}

			.buy {
				width: px2rpx(160);
				height: px2rpx(40);
				color: #fff;
				background-image: linear-gradient(to right, #ffce1e, #ff8a17);
				border-radius: 0 px2rpx(20) px2rpx(20) 0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: px2rpx(5);
				font-size: px2rpx(14);

			}

		}

		// 弹框
		.jump-box {
			.good-info {
				height: px2rpx(120);
				width: px2rpx(355);
				margin: px2rpx(10);
				display: flex;
				flex-direction: row;

				image {
					width: px2rpx(100);
					height: px2rpx(100);
					margin: px2rpx(10);
				}

				.info-right {
					margin-left: px2rpx(10);
					margin-top: px2rpx(30);

					.price {
						color: #ee0a24;
						font-size: px2rpx(22);
					}

					.count,
					.choice {
						color: #969799;
						font-size: px2rpx(12);
					}
				}
			}

			.number-box {
				height: px2rpx(55);
				width: px2rpx(355);
				display: flex;
				justify-content: space-between;

				.buycount {
					margin-left: px2rpx(20);
				}
			}

			// 分割线
			.cutline {
				border-top: 1px solid #ddd;
				text-align: center;
				margin: px2rpx(10) px2rpx(20);
			}

			.cutline::after {
				content: "其他信息";
				color: #969799;
				font-size: px2rpx(12);
				position: relative;
				top: -15px;
				background: #fff;
				padding: 0 20px;
			}

			.other-info {
				margin-left: px2rpx(20);
				color: #969799;
				font-size: px2rpx(12);
			}

			.button {
				height: px2rpx(40);
				width: px2rpx(355);
				margin: px2rpx(10);
				display: flex;

				.add-button {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: px2rpx(14);
					border-radius: px2rpx(20);
					background-image: linear-gradient(to right, #ffce1e, #ff8a17);
				}

				.buy-button {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: px2rpx(14);
					border-radius: px2rpx(20);
					background-image: linear-gradient(to right, #ff5f34, #ef0d25);
				}

			}
		}
	}
</style>